<template>
  <!-- 主页面 -->
  <div>

    <div class="head">

      <div style="font-size: 2em">椰丝驾校</div>


      <!--滚动条 -->
      <div class="msg" style="margin-top: 50px;width: 750px" >{{ msg }}</div>
      <div style="float: right;display: inline-block;margin-top: -50px">
        <el-button @click="$router.push('/personal')" type="primary" plain>个人中心</el-button>
        <el-button @click="$router.push('/login')" type="success" plain>退出登录</el-button>
      </div>

    </div>


    <!-- 中间模块 -->
    <el-card  class="card" >
      <el-tabs :tab-position="tabPosition" style="height: 300px;">


        <el-tab-pane label=" 驾校简介" >驾校简介 <br> <div >1212121</div> </el-tab-pane>
        <el-tab-pane label="关于我们">关于我们 <br> <div >11111</div> </el-tab-pane>
        <el-tab-pane label="联系方式">联系方式 <br> <div >22222</div> </el-tab-pane>
        <el-tab-pane label="服务承诺">服务承诺 <br> <div >3333</div> </el-tab-pane>
        <el-tab-pane label="图片展示">图片展示 <br> <div >44444</div> </el-tab-pane>
        <el-tab-pane label="收费标准">收费标准 <br> <div >555555</div> </el-tab-pane>
        <el-tab-pane label="网上报名">网上报名 <br> <div >666</div> </el-tab-pane>
      </el-tabs>
    </el-card>


  </div>
</template>

<script>
export default {
  name: "index",

  data() {
    return {
      tabPosition: 'left',
      msg: '欢迎光临椰丝驾校！椰丝驾校始终秉承“学院之上，诚信为本”的宗旨，努力为学员提供优质的教学服务。',
      intervalId: null ,//在data上定义 定时器Id

    };
  },
  created() {
    this.lang();
  },
  methods: {
    lang() {

      if (this.intervalId !== null) {
        return;
      }

      var _this = this
      this.intervalId = setInterval(function () {
        // 获取到头的第一个字符
        var start = _this.msg.substring(0, 1)

        // 获取到后面的所有字符
        var end = _this.msg.substring(1)

        // 重新拼接得到的字符串 并赋值给this.msg
        _this.msg = end + start

      }, 800)

    },

  }
};


</script>

<style scoped>
.head {
  height: 120px;
  width: 1000px;
  border: solid 1px #e6ff00;
  margin: 0 auto;
  background-color: silver;

}

.msg {
  display: flex;
  width: 800px;

}
.card{
  /*height: 100%;*/
  /*width: 100%;*/
  position: fixed;
  /*background: url("../assets/14.jpg" );*/
  /*background-position: center;*/
  background-size: cover;
color: #59a7ec;
  font-size: 2em;
}


</style>